/*
* 阔地教育科技有限公司版权所有（codyy.com/codyy.cn）.
* Copyright (c) 2019, Codyy and/or its affiliates. All rights reserved.
* @Date: 2020.01.02 00:31.
* @Author
* @Description 导航栏组建
**/
<template>
  <div :class="getName">
    <!-- logo -->
    <p class="h-logo"></p>
    <!-- 导航 -->
    <ul class="h-nav">
      <li :key="item.id" v-for="item in list">
        <span>{{ item.english }}</span>
        <p @click="handleRouterClick(item)">{{ item.name }}</p>
      </li>
    </ul>
    <!-- 第三方图标 -->
    <ul class="h-part" v-if="terminal === 'pc'">
      <li class="h-wx">
          <svg aria-hidden="true" class="icon">
              <use xlink:href="#iconweixin"></use>
          </svg>
          <p>
            <img src="@/assets/img/qr-code.jpg"/>
            金友福微信二维码
          </p>
      </li>
      <li>
          <svg aria-hidden="true" class="icon">
              <use xlink:href="#iconweibo"></use>
          </svg>
      </li>
      <li>
          <svg aria-hidden="true" class="icon">
              <use xlink:href="#icontaobao-copy"></use>
          </svg>
      </li>
      <li>
          <img class="h-logo-icon" src="@/assets/img/logo-icon.jpg"/>
      </li>
    </ul>
  </div>
</template>
<script>
import { navData } from '@/api'
import { navList } from '@/mock' // 导航数据

export default {
  name: 'NavBar',
  data () {
    return {
      list: [],
      terminal: '', // 终端类型
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
    // this.getNavData()
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-pc'
      } else {
        return 'h-ph'
      }
    }
  },
  mounted () {
    this.list = navList.result
  },
  methods: {
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getNavData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      navData(params).then(res => {
        this.list = res
      })
    },
    /**
     *@Description
     *@Param
     *@Return 点击跳转路由.
     **/
    handleRouterClick (item) {
      this.$router.push({ name: item.router, params: { id: item.id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-logo {
    height: 80px;
    margin-bottom: 50px;
    background: url("~@/assets/img/logo.jpg") no-repeat left center;
  }
  .h-nav {
    li {
      margin-bottom: 10px;
      color: #666;
      span{
        font-weight: bold;
        color: #000;
      }
    }
    p:hover {
      cursor: pointer;
      text-decoration: underline;
      color: #333;
    }
  }
  /* 移动端 */
  .h-ph{
    .h-logo {
      height: 60px;
      margin-bottom: 2px;
      background-size: auto 50px;
    }
    .h-nav {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      box-shadow: 0 2px 10px #9a0630;
      background: #9a0630;
      overflow: hidden;
      li {
        width: 20%;
        text-align: center;
        float: left;
        color: #fff;
        span{
          display: none;
        }
      }
    }
  }
  /* 第三方图标 */
  .h-part {
      margin-top: 30px;
      li {
          font-size: 25px;
          position: relative;
          float: left;
          margin-right: 10px;
          cursor: pointer;
          p {
              font-size: 14px;
              position: absolute;
              top: -165px;
              left: 0;
              display: none;
              width: 140px;
              text-align: center;
              color: #333;
              background: #fff;
          }
          img {
              display: block;
              width: 100%;
          }
      }
      .h-wx:hover {
          p {
              display: block;
          }
      }
      .h-logo-icon {
          width: 27px;
          height: 27px;
          margin-top: 4px;
      }
  }
</style>
